<template>
    <div class="app-container">
        <div class="warp_padding">
            <div class="head-container">
                <el-select v-model="formDate.schId" filterable size="small" clearable placeholder="请选择学校" @change="toQuery()" >
                        <el-option
                            v-for="item in allschList"
                            :key="item.schId"
                            :label="item.schName"
                            :value="item.schId" >
                        </el-option>
                </el-select>
                <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>

                <div class="terms" v-if="Arys.terminfo">学期信息：{{Arys.terminfo.termYear}} {{Arys.terminfo.termSegmentName}}<span>{{Arys.terminfo.mothName}}</span></div>
            </div>
            <el-row type="flex" class="row-bg" justify="center" style="border-left: 1px solid #DCDFE6;font-size:14px">
              <el-col :span="6"><div class="grid-title">互动教室名称</div></el-col>
              <el-col :span="6"><div class="grid-title">教室类型</div></el-col>
              <el-col :span="6"><div class="grid-title">星期一</div></el-col>
              <el-col :span="6"><div class="grid-title">星期二</div></el-col>
              <el-col :span="6"><div class="grid-title">星期三</div></el-col>
              <el-col :span="6"><div class="grid-title">星期四</div></el-col>
              <el-col :span="6"><div class="grid-title">星期五</div></el-col>
              <el-col :span="6"><div class="grid-title">星期六</div></el-col>
              <el-col :span="6"><div class="grid-title">星期日</div></el-col>
            </el-row>
            
            <div class="content">
                <el-row type="flex" class="row-bg" justify="center"  v-for="(item,index) in Lists" :key="index">
                    <el-col :span="6" class="class_box"><div class="className">{{item.classroom.roomName}}</div></el-col>

                    <el-col :span="6" class="class_box">
                        <div class="className">{{item.crType|formatDate}}</div>                 
                    </el-col>

                    <el-col :span="6" @mouseenter.native="getInto(item.classroom.id)"  @mouseleave.native="leave(item.classroom.id)" :id="forId(item.classroom.id)">
                        <div class="grid-content" v-for="(tags1,index) in item.monday"  @click="getLable(tags1.id)" :class="getStatusCss(tags1.lessonName)">
                            {{tags1.subjectName}}<span>：</span>{{tags1.lessonName}}</div>
                        <div  class="el-icon-plus" id="add_icon"   v-if="checkPermission(['rili_all','rili_add'])" v-show="ID === item.classroom.id"  @click="idAdd(item.classroom.id)"></div>   
                    </el-col>
                    
                    <el-col :span="6" @mouseenter.native="getInto2(item.classroom.id)"  @mouseleave.native="leave(item.classroom.id)" :id="forId(item.classroom.id)">
                        <div class="grid-content" v-for="(tags1,index) in item.tuesday"  @click="getLable(tags1.id)" :class="getStatusCss(tags1.lessonName)">{{tags1.subjectName}}<span>：</span>{{tags1.lessonName}}</div>
                        <div class="el-icon-plus" id="add_icon" v-if="checkPermission(['rili_all','rili_add'])"  v-show="ID2 === item.classroom.id"  @click="idAdd(item.classroom.id)"></div>   
                    </el-col>

                    <el-col :span="6" @mouseenter.native="getInto3(item.classroom.id)"  @mouseleave.native="leave(item.classroom.id)" :id="forId(item.classroom.id)">
                        <div class="grid-content" v-for="(tags1,index) in item.wednesday"  @click="getLable(tags1.id)" :class="getStatusCss(tags1.lessonName)">{{tags1.subjectName}}<span>：</span>{{tags1.lessonName}}</div>
                        <div class="el-icon-plus" id="add_icon" v-if="checkPermission(['rili_all','rili_add'])"  v-show="ID3 === item.classroom.id"  @click="idAdd(item.classroom.id)"></div>   
                    </el-col>
                    <el-col :span="6" @mouseenter.native="getInto4(item.classroom.id)"  @mouseleave.native="leave(item.classroom.id)" :id="forId(item.classroom.id)">
                        <div class="grid-content" v-for="(tags1,index) in item.thursday"  @click="getLable(tags1.id)" :class="getStatusCss(tags1.lessonName)">{{tags1.subjectName}}<span>：</span>{{tags1.lessonName}}</div>
                        <div class="el-icon-plus" id="add_icon" v-if="checkPermission(['rili_all','rili_add'])"  v-show="ID4 === item.classroom.id"  @click="idAdd(item.classroom.id)"></div>   
                    </el-col>

                    <el-col :span="6" @mouseenter.native="getInto5(item.classroom.id)"  @mouseleave.native="leave(item.classroom.id)" :id="forId(item.classroom.id)">
                        <div class="grid-content" v-for="(tags1,index) in item.friday"  @click="getLable(tags1.id)" :class="getStatusCss(tags1.lessonName)">{{tags1.subjectName}}<span>：</span>{{tags1.lessonName}}</div>
                        <div class="el-icon-plus" id="add_icon" v-if="checkPermission(['rili_all','rili_add'])"  v-show="ID5 === item.classroom.id"  @click="idAdd(item.classroom.id)"></div>   
                    </el-col>

                    <el-col :span="6" @mouseenter.native="getInto6(item.classroom.id)"  @mouseleave.native="leave(item.classroom.id)" :id="forId(item.classroom.id)">
                        <div class="grid-content" v-for="(tags1,index) in item.saturday"  @click="getLable(tags1.id)" :class="getStatusCss(tags1.lessonName)">{{tags1.subjectName}}<span>：</span>{{tags1.lessonName}}</div>
                        <div class="el-icon-plus" id="add_icon" v-if="checkPermission(['rili_all','rili_add'])" v-show="ID6 === item.classroom.id"  @click="idAdd(item.classroom.id)"></div>   
                    </el-col>

                    <el-col :span="6" @mouseenter.native="getInto7(item.classroom.id)"  @mouseleave.native="leave(item.classroom.id)" :id="forId(item.classroom.id)">
                        <div class="grid-content" v-for="(tags1,index) in item.sunday"  @click="getLable(tags1.id)" :class="getStatusCss(tags1.lessonName)">{{tags1.subjectName}}<span>：</span>{{tags1.lessonName}}</div>
                        <div class="el-icon-plus" id="add_icon" v-if="checkPermission(['rili_all','rili_add'])" v-show="ID7 === item.classroom.id"  @click="idAdd(item.classroom.id)"></div>   
                    </el-col>
                 
                </el-row>
            </div>
            <div class="noMsg" v-if="this.Lists.length===0">暂无数据</div>
            <eForm ref="form" :is-add="isAdd" />
            <see ref="see" :is-add="isAdd" />
        </div>
    </div>
</template>
<script>
import checkPermission from '@/utils/permission' 
import eForm from './component/form'
import see from './component/see'
import {  allSchoolList, riliList } from '@/api/request'
import { riliSee } from '@/api/data'
export default {
    components: { eForm, see },
    filters: {
        formatDate(roomType) {
            return  roomType == 0 ? '精品教室' : roomType == 1 ? '主讲教室' : roomType == 2 ? '专业互动教室' : roomType == 3 ? '直播互动教室' : roomType == 4 ? '直播教室': roomType == '' ? '' : '未知'; 
        }, 
    },
    data() {
        return {
            isAdd:true,
            ID:'',ID2:'',ID3:'',ID4:'',ID5:'',ID6:'',ID7:'',                    
            Lists:[],
            allschList:[],
            formDate:{
                schId: "",  
                pageNo: 1,  
                pageSize:10,
            },
            Arys:{},
        };
    },
    methods: {
        checkPermission,
        init(){
            allSchoolList().then(res=>{
                this.allschList = res.data
            })
        },
        List(){
            // this.formDate.schId = '1000000975046660'
            let params = {...this.formDate}
            riliList(params).then(res => { 
                this.Arys = res
                this.Lists = res.List
            })
        },
        toQuery(){
            this.List()
        },
        getLable(id){   
            riliSee(id).then((res)=>{
               this.$refs.see.dialog = true
               this.$refs.see.form = res.data
            })
        },
        getInto(id){this.ID = id},getInto2(id){
            this.ID2 = id},getInto3(id){
            this.ID3 = id
        },              
        getInto4(id){this.ID4 = id},getInto5(id){
            this.ID5 = id},getInto6(id){        
            this.ID6 = id
        },
        forId(id){
            return id
            },getInto7(id){
            this.ID7 = id
        },                 
        
        leave(id){
            this.ID = ''
            this.ID2 = ''
            this.ID3 = ''
            this.ID4 = ''
            this.ID5 = ''
            this.ID6 = ''
            this.ID7 = ''
        },
        idAdd(id){
            this.$refs.form.form ={
                schId: "", 
                crId: "",                    //互动教室id
                terminfoId:'',               //学期id
                roomType:'',                 //教室类型
                weekNo:'' ,                  //周几
                lessonNo:'',                 //课节
                startTimeString:'',          //开始时间
                endTimeString:'',            //结束时间
                lectureTeaId:'',             //主讲老师id
                subjectId:'',                //科目
                liveRoomName:'',             //直播互动教室
                assistRoom:'',               //听讲教室
                assistClassName:'',          //听讲班级
                assistTeaId:'',              //听讲老师
                planRemarks:'',              //备注
            }
            setTimeout(()=> {
                this.$refs.form.dialog = true
                this.$refs.form.form.schId = this.formDate.schId
                this.$refs.form.form.crId = id
                this.$refs.form.init()
            }, 200)          
        },
        getStatusCss(desc) {
            let  css = {};
            switch(desc)
                {
                    case '早读':css['text-zaodu'] = true;break;                            
                    case '第一节':css['text-yiJie'] = true;break;
                    case '第二节':css['text-erJie'] = true;break;
                    case '第三节':css['text-sanJie'] = true;break;
                    case '第四节':css['text-siJie'] = true;break;
                    case '第五节':css['text-wuJie'] = true;break;
                    case '第六节':css['text-liuJie'] = true;break;
                    case '第七节':css['text-qiJie'] = true;break;
                    case '第八节':css['text-baJie'] = true;break;
                    case '晚读':css['text-wanDu'] = true;break;
                    case '晚自1':css['text-wanXi'] = true;break;
                    case '晚自1':css['text-wanXi'] = true;break;
                    case '晚自3':css['text-wanXi'] = true;break;                                                
                }
                return css;
        },
    },
    mounted:function(){
        this.init()
    },
};
</script>
<style  scoped lang="scss">
// label背景
.text-zaodu{
   background: #006400!important;
}
.text-yiJie{
  background:  #556B2F!important;
}
.text-erJie{
    color: #000 !important;
  background:  	#F5F5DC!important;
}
.text-sanJie{
  background:  	#00FFFF!important;
}
.text-siJie{
   background: #00BFFF!important;
}
.text-wuJie{
  background:   	#0000CD!important;
}
.text-liuJie{
  background:  	 	#006400!important;
}
.text-qiJie{
  background:  	#FF4500!important;
}
.text-baJie{
   background:  	#800000!important;
}


.text-wanDu{
  background:  #808080!important;
}
.text-wanXi{
  background:    #000000!important;
}



.app-container{
    overflow-x: auto;
}
.terms{
   float:right; 
   margin-top: 30px;
}
.content{
    border-left: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
}
.el-row {
    min-width: 1000px;
    overflow-x: auto;
    &:last-child {
      margin-bottom: 0;
    }
}
.el-col {
  border: 1px solid #DCDFE6;
  border-left: none;
  border-bottom: none;
  font-size:13px;
}
.class_box{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-height: 76px;
}
.className{
   font-size: 13px;
   margin: 0 5%;
}
.grid-content {
   color: #fff;
   padding: 3px 0;
   text-align: center;
   margin: 3% 14%;
   background: #daa23f;
   border-radius: 5px;
   cursor: pointer;
}
.grid-title{
   min-height: 30px;
   line-height: 30px;
   font-size: 13px;
   text-align: center; 
}
#add_icon{
    cursor: crosshair;
    width: 30px;
    height: 15px;
    line-height: 15px;
    background: #008000;
    margin: 2px auto;
    color: #fff;
    text-align: center;
}
.noMsg{
    text-align: center;
    margin: 20px 0;
    font-size:13px;
    color:#a09d9d
}
</style>